<!DOCTYPE HTML>
<html>
	<head>
		<!-- meta tette -->
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="height=device-height, initial-scale=1">
		
		<!-- stylesheets -->
<!--		<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.theme-1.2.0.min.css" /> -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
		
		<link rel="stylesheet" href="css/CityQuest.css">
		<link rel="stylesheet" href="css/master.css">
		
		<!-- Third-party scripts -->
		<!-- jquery -->
		<script src="js/lib/jquery/jquery.js"></script> 
<!--		<script src="js/lib/jquery/jquery.mobile-1.2.0.min.js"></script> -->
		<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script> 
		<script src="js/lib/jquery/jquery.ui.map.full.min.js"></script>
		<!-- cordova -->		
<!--	<script src="js/lib/cordova/cordova-1.5.0.js"></script> -->
		<script src="js/lib/cordova/cordova-2.3.0.js"></script> 

	  	<!-- underscore -->
		<script src="js/lib/underscore/underscore-1.3.1.js"></script>
	  	<!-- zepto -->
	  	<script src="js/lib/zepto/zepto-0.8.js"></script>
	  	<!-- google maps -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9WxyvoqyRoGIAh29QpHVwt_Imr-ofIUU&sensor=false&libraries=drawing"></script>
	  	
<!--	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> -->
	  	
	  	
	  	<!-- CityQuest scripts -->
	  	<script src="js/main.js"></script> 
	  	<script src="js/init.js"></script> 
	  	<script src="js/maps.js"></script> 
	  	<script src="js/directions.js"></script> 
	  <!--	<script src="js/CityQuestMain.js"></script> -->
	  	
		<title>CityQuest</title>
	</head>
	<body>
		<div data-role="page" id="index" data-theme="b">
 			<div id="index-header" class="ui-bar ui-bar-a">
				<div id="header-logo-container">
					<img src="images/logo.png" class="ui-btn-left logo-image" height="41" width="41"/>
		   			<span>CityQuest</span>
		   		</div>
				<div id="header-monument-button-container">
		    		<a id="monumentsButton" href="#monuments-library" data-transition="slide" data-icon="monuments-button" data-role="button">0/12</a>
		  		</div>
				<div id="header-secret-button-container">
		    	  	<a id="secretsButton" href="#secrets-library" data-transition="slide" data-icon="secrets-button" data-role="button">0/4</a>
		   		</div>
		    </div>
 		    <div data-role="content"> 
		    	<div id="map_canvas" style="width:100%;height:400px"></div>    
		    	<input id="findQuests" type="button" value="Find quests in your current city" />
		    </div>
 		    <div data-role="footer" id="index-footer" data-position="fixed" data-theme="a">
		        <h4>Credits: Luca Cervone</h4>
		    </div>
			<div data-role="popup" id="startQuestDialog" data-overlay-theme="e" data-theme="e" style="max-width:400px;" class="ui-corner-all">
				<div data-role="header" data-theme="a" class="ui-corner-top">
					<h1>Found a quest!</h1>
				</div>
				<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
					<h3 class="ui-title" id="startQuestDialogTitle"></h3>
					<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">No thanks ...</a>    
					<a href="#quest-main" id="start-quest-button" data-role="button" data-inline="true" data-transition="slide" data-theme="b">Start the quest!</a>  
				</div>
			</div>		
		</div>
		
		<!-- Pagina inizio quest -->
		<div data-role="page" id="quest-main" data-theme="e">
 			<div id="index-header" class="ui-bar ui-bar-a">
				<div id="header-logo-container">
					<img src="images/logo.png" class="ui-btn-left logo-image" height="41" width="41"/>
		   			<span>CityQuest</span>
		   		</div>
				<div id="header-monument-button-container">
		    		<a id="monumentsButton" href="#monuments-library" data-transition="slide" data-icon="monuments-button" data-role="button">0/12</a>
		  		</div>
				<div id="header-secret-button-container">
		    	  	<a id="secretsButton" href="#secrets-library" data-transition="slide" data-icon="secrets-button" data-role="button">0/4</a>
		   		</div>
		    </div>
 		    <div id="quest-main-content" data-role="content"> 
		    	<div id="map-canvas-start-quest"></div>    
		    </div>
 		    <div data-role="footer" id="quest-main-footer" data-position="fixed" data-theme="b">
		        <h4>Credits: Luca Cervone</h4>
		    </div>
		</div>

		<!-- page monuments library -->
		<div data-role="page" id="monuments-library" data-theme="b" style="background: transparent url('images/shelf-bg.png') no-repeat center center !important; background-size: 100% 100% !important;">
 			<div id="index-header" class="ui-bar ui-bar-a">
				<div id="header-logo-container">
					<img src="images/logo.png" class="ui-btn-left logo-image" height="41" width="41"/>
		   			<span>CityQuest</span>
		   		</div>
				<div id="header-monument-button-container">
		    		<a id="monumentsButton" href="#monuments-library" data-transition="slide" data-icon="monuments-button" data-role="button">0/12</a>
		  		</div>
				<div id="header-secret-button-container">
		    	  	<a id="secretsButton" href="#secrets-library" data-transition="slide" data-icon="secrets-button" data-role="button">0/4</a>
		   		</div>
		    </div>
 		    <div data-role="content"> 
		    </div>
 		    <div data-role="footer" id="index-footer" data-position="fixed" data-theme="a">
		        <h4>Credits: Luca Cervone</h4>
		    </div>
			</div>		
		</div>

		
		<!-- page secrets library -->
		<div data-role="page" id="secrets-library" data-theme="b" style="background: transparent url('images/shelf-bg.png') no-repeat center center !important; background-size: 100% 100% !important;">
 			<div id="index-header" class="ui-bar ui-bar-a">
				<div id="header-logo-container">
					<img  src="images/logo.png" class="ui-btn-left logo-image" height="41" width="41"/>
		   			<span>CityQuest</span>
		   		</div>
				<div id="header-monument-button-container">
		    		<a id="monumentsButton" href="#monuments-library" data-transition="slide" data-icon="monuments-button" data-role="button">0/12</a>
		  		</div>
				<div id="header-secret-button-container">
		    	  	<a id="secretsButton" href="#secrets-library" data-transition="slide" data-icon="secrets-button" data-role="button">0/4</a>
		   		</div>
		    </div>
 		    <div data-role="content"> 
		    </div>
 		    <div data-role="footer" id="index-footer" data-position="fixed" data-theme="a">
		        <h4>Credits: Luca Cervone</h4>
		    </div>
			</div>		
		</div>
		
		
		<!-- weinre console available at http://debug.phonegap.com/client/#hella-foobar -->
		<script src="http://debug.phonegap.com/target/target-script-min.js#hella-foobar"></script>
	</body>
</html>
